<template>
  <div class="index-container-ty">
    <a-row type="flex" justify="start" :gutter="3">
      <a-col :sm="24" :lg="12">
        <a-card>
          <template #title>
            <div class="index-md-title">
              <img :src="daibanPng" />
              我的待办【{{ dataSource1.length }}】
            </div>
          </template>

          <template v-if="dataSource1 && dataSource1.length > 0" #extra>
            <a @click="goPage"
              >更多
              <Icon icon="ant-design:double-right-outlined" />
            </a>
          </template>

          <a-table
            :class="'my-index-table tytable1'"
            ref="table1"
            size="small"
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource1"
            :pagination="false"
          >
            <template #ellipsisText="{ text }">
              <Ellipsis :value="text" :length="textMaxLength"></Ellipsis>
            </template>

            <template #dayWarnning="{ text, record }">
              <BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
            </template>

            <template #action="{ text, record }">
              <a @click="handleData">办理</a>
            </template>
          </a-table>
        </a-card>
      </a-col>

      <a-col :sm="24" :lg="12">
        <a-card>
          <template #title>
            <div class="index-md-title">
              <img :src="zaibanPng" />
              我的在办【{{ dataSource2.length }}】
            </div>
          </template>

          <template v-if="dataSource2 && dataSource2.length > 0" #extra>
            <a @click="goPage"
              >更多
              <Icon icon="ant-design:double-right-outlined" />
            </a>
          </template>

          <a-table
            :class="'my-index-table tytable2'"
            ref="table1"
            size="small"
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource2"
            :pagination="false"
          >
            <template #ellipsisText="{ text }">
              <Ellipsis :value="text" :length="textMaxLength"></Ellipsis>
            </template>

            <template #dayWarnning="{ text, record }">
              <BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
            </template>

            <template #action="{ text, record }">
              <a @click="handleData">办理</a>
            </template>
          </a-table>
        </a-card>
      </a-col>

      <a-col :span="24">
        <div style="height: 5px"></div>
      </a-col>

      <a-col :sm="24" :lg="12">
        <a-card>
          <template #title>
            <div class="index-md-title">
              <img :src="guazPng" />
              我的挂账【{{ dataSource4.length }}】
            </div>
          </template>

          <a-table
            :class="'my-index-table tytable4'"
            ref="table1"
            size="small"
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource4"
            :pagination="false"
          >
            <template #ellipsisText="{ text }">
              <Ellipsis :value="text" :length="textMaxLength"></Ellipsis>
            </template>

            <template #dayWarnning="{ text, record }">
              <BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
            </template>

            <template #action="{ text, record }">
              <a @click="handleData">办理</a>
            </template>
          </a-table>
        </a-card>
      </a-col>

      <a-col :sm="24" :lg="12">
        <a-card>
          <template #title>
            <div class="index-md-title">
              <img :src="dubanPng" />
              我的督办【{{ dataSource3.length }}】
            </div>
          </template>

          <a-table
            :class="'my-index-table tytable3'"
            ref="table1"
            size="small"
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource3"
            :pagination="false"
          >
            <template #ellipsisText="{ text }">
              <Ellipsis :value="text" :length="textMaxLength"></Ellipsis>
            </template>

            <template #dayWarnning="{ text, record }">
              <BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
            </template>

            <template #action="{ text, record }">
              <a @click="handleData">办理</a>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import noDataPng from '@/assets/images/nodata.png';
import { useMessage } from '@/hooks/web/useMessage';
import Ellipsis from '@/components/Ellipsis/Ellipsis.vue';
import { BulbTwoTone, BellTwoTone } from '@ant-design/icons-vue';
import daibanPng from '@/assets/images/daiban.png';
import zaibanPng from '@/assets/images/zaiban.png';
import guazPng from '@/assets/images/guaz.png';
import dubanPng from '@/assets/images/duban.png';
const tempSs1 = [
  {
    id: '001',
    orderNo: '电[1]1267102',
    orderTitle: '药品出问题了',
    restDay: 1,
  },
  {
    id: '002',
    orderNo: '电[4]5967102',
    orderTitle: '吃了xxx医院的药，病情越来越严重',
    restDay: 0,
  },
  {
    id: '003',
    orderNo: '电[3]5988987',
    orderTitle: '今天去超市买鸡蛋，鸡蛋都是坏的',
    restDay: 7,
  },
  {
    id: '004',
    orderNo: '电[2]5213491',
    orderTitle: 'xx宝实体店高价售卖xx',
    restDay: 5,
  },
  {
    id: '005',
    orderNo: '电[1]1603491',
    orderTitle: '以红利相诱，答应退保后扣一年费用',
    restDay: 0,
  },
];

const tempSs2 = [
  {
    id: '001',
    orderTitle: '我要投诉这个大超市',
    orderNo: '电[1]10299456',
    restDay: 6,
  },
  {
    id: '002',
    orderTitle: 'xxx医院乱开药方,售卖假药',
    orderNo: '电[2]20235691',
    restDay: 0,
  },
  {
    id: '003',
    orderTitle: '我想问问这家店是干啥的',
    orderNo: '电[3]495867322',
    restDay: 7,
  },
  {
    id: '004',
    orderTitle: '我要举报朝阳区奥森公园酒店',
    orderNo: '电[2]1193849',
    restDay: 3,
  },
  {
    id: '005',
    orderTitle: '我今天吃饭吃到一个石头子',
    orderNo: '电[4]56782344',
    restDay: 9,
  },
];

//4-7天
const tip_green = 'rgba(0, 255, 0, 1)';
//1-3天
const tip_yellow = 'rgba(255, 255, 0, 1)';
//超期
const tip_red = 'rgba(255, 0, 0, 1)';

const textMaxLength = 8;
const $message = useMessage();

const dataSource1 = ref([]);
const dataSource2 = ref([]);
const dataSource3 = ref([]);
const dataSource4 = ref([]);
const columns = [
  {
    title: '',
    dataIndex: '',
    key: 'rowIndex',
    width: 50,
    fixed: 'left',
    align: 'center',
    slots: { customRender: 'dayWarnning' },
  },
  {
    title: '剩余天数',
    align: 'center',
    dataIndex: 'restDay',
    width: 80,
  },
  {
    title: '工单标题',
    align: 'center',
    dataIndex: 'orderTitle',
    slots: { customRender: 'ellipsisText' },
  },
  {
    title: '工单编号',
    align: 'center',
    dataIndex: 'orderNo',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    slots: { customRender: 'action' },
  },
];

function getTipColor(rd) {
  let num = rd.restDay;
  if (num <= 0) {
    return tip_red;
  } else if (num >= 1 && num < 4) {
    return tip_yellow;
  } else if (num >= 4) {
    return tip_green;
  }
}

function mock() {
  dataSource1.value = tempSs1;
  dataSource2.value = tempSs2;
  dataSource3.value = tempSs1;
  dataSource4.value = [];
  ifNullDataSource(dataSource4, '.tytable4');
}

function ifNullDataSource(ds, tb) {
  if (!ds || ds.length == 0) {
    var tmp = document.createElement('img');
    tmp.src = noDataPng;
    tmp.width = 300;
    let tbclass = `${tb} .ant-table-placeholder`;
    document.querySelector(tbclass).innerHTML = '';
    document.querySelector(tbclass).appendChild(tmp);
  }
}

function handleData() {
  $message.createMessage.success('办理完成');
}

function goPage() {
  $message.createMessage.success('请根据具体业务跳转页面');
}

mock();
</script>

<style scoped lang="less">
.my-index-table {
  height: 270px;

  table {
    font-size: 14px !important;
  }
}

.index-container-ty {
  margin: 12px 12px 0;

  :deep(.ant-card-body) {
    padding: 10px 12px 0 12px;
  }

  :deep(.ant-card-head) {
    line-height: 24px;
    min-height: 24px;
    background: #7196fb !important;

    .ant-card-head-title {
      padding-top: 6px;
      padding-bottom: 6px;
    }

    .ant-card-extra {
      padding: 0;

      a {
        color: #fff;
      }

      a:hover {
        color: #152ede;
      }
    }
  }

  :deep(.ant-table-footer) {
    text-align: right;
    padding: 6px 12px 6px 6px;
    background: #fff;
    border-top: 2px solid #f7f1f1;
  }

  .index-md-title {
    position: relative;
    width: 100%;
    color: #fff;
    font-size: 21px;
    font-family: cursive;
    padding-left: 25px;

    img {
      position: absolute;
      height: 25px;
      left: 0;
    }
  }

  :deep(.ant-table-thead > tr > th),
  :deep(.ant-table-tbody > tr > td) {
    border-bottom: 1px solid #90aeff;
  }

  :deep(
      .ant-table-small
        > .ant-table-content
        > .ant-table-fixed-left
        > .ant-table-body-outer
        > .ant-table-body-inner
        > table
        > .ant-table-thead
        > tr
        > th
    ),
  :deep(
      .ant-table-small
        > .ant-table-content
        > .ant-table-fixed-right
        > .ant-table-body-outer
        > .ant-table-body-inner
        > table
        > .ant-table-thead
        > tr
        > th
    ) {
    border-bottom: 1px solid #90aeff;
  }

  :deep(.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th) {
    border-bottom: 1px solid #90aeff;
  }

  :deep(.ant-table-small) {
    border: 1px solid #90aeff;
  }

  :deep(.ant-table-placeholder) {
    padding: 0;
    height: 215px;
  }
}
</style>
